<template>
<div :class="classes">
  <slot></slot>
</div>
</template>

<script>
export default {

  computed: {
    classes() {
      return ['callout', this.color];
    }
  },

  props: {
    color: {
      type: String,
      default: 'alert',
      validator(value) {
        return ['secondary', 'primary', 'success', 'warning', 'alert'].indexOf(value) !== -1;
      }
    }
  }

};
</script>
